body{
    background-color: #f9a0a0;
    font:bold 20px 'Courier'
}
*{
    margin: 0;
    padding: 0;
    //改变盒子模型
    box-sizing: border-box;
}

//设置主窗口
#main{
    position: absolute;
    top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 20.556vw auto;
    width: 360px;
    height: 420px;
    background-color: #b7d4a9;
    border: 10px solid #000;
    border-radius: 20px;

    //开启弹性盒模型
    display: flex;
    //设置主轴 纵向
    flex-flow: column;
    //设置侧轴对齐方式
    align-items: center;
    //主轴的对齐方式
    justify-content: space-around;

    //游戏舞台
    #stage{
    position: relative;
    width: 304px;
    height: 304px;
    border: 2px solid #000;

    //设置🐍的样式
    #snake>div{
        width: 10px;
        height: 10px;
        background-color: #000000;
        border: 1px solid #b7d4a9;
       //开启定位
        position: absolute;
    }
    //设置食物
    #food{
        position: absolute;
        display: flex;
        // 主轴
        flex-direction: row;
        //换行
        flex-wrap: wrap;
        //与交叉轴两端对齐，轴线之间的间隔平均分布。
        align-content: space-between;
        //两端对齐，项目之间的间隔都相等。
        justify-content: space-between;
        //交叉轴的中点对齐。
        align-items: center;
        width: 10px;
        height: 10px;
        // background-color: #e10000;
        left: 40px;
        top: 100px;
        transform: rotate(45deg);
        div{
            width: 4px;
            height: 4px;
            background-color: #000;
            

        }
    }
    }

    //游戏记分牌
    #score-panel{
        width: 300px;
        display: flex;
        justify-content: space-between;
    }
}
#BUT{
    position: absolute;
    top: 450px;
	// left: 0;
	// right: 0;
	// bottom: 0;
	margin: auto;
    width: 120px;
    height: 120px;
    background-color: #b7d4a9;
    border: 1px solid #000;
    padding: 9px;
    border-radius: 20px;
        display: flex;
        // 主轴
        flex-direction: row;
        //换行
        flex-wrap: wrap;
        //与交叉轴两端对齐，轴线之间的间隔平均分布。
        align-content: space-between;
        //两端对齐，项目之间的间隔都相等。
        justify-content: space-between;
        //交叉轴的中点对齐。
        align-items: center;
        transform: rotate(45deg);
    div{
        width: 49px;
        height: 49px;
        // background-color: #fff;
        text-align: center;
        line-height: 50px;
        border-radius: 10px;
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        border-bottom: 5px solid #000;
        border-right: 5px solid #000;
        // transform: rotate(-45deg);
        i{
            display: inline-block;
            transform: rotate(-45deg);
        }
    }
    div:hover{
        background-color: #80a46e;
         border-top: none;
        border-left: none;
         border-bottom: 1px solid #000;
        border-right: 1px solid #000;
    }
}

